<template>
	<view class="">
		<u-sticky>
			<view class="topNum">
				<view class="topTitle">订单总额</view>
				<view class="">
					<text class="top-tips">￥</text>
					<text class="top-num">{{ orderNumber }}</text>
				</view>
			</view>
		</u-sticky>
		<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :back-top="true" :headerHeight="85">
			<view class="item-swiper">
				<view class="item" v-for="(item, index) in dataList" :key="index">
					<view class="item-top row between" style="padding: 24upx 0;">
						<u-avatar :src="item.userIcon" size="60" mode="circle"></u-avatar>
						<view class="fill row between" style="padding-left: 20upx;">
							<view class="item-name">{{ item.userName }}</view>
							<view class="item-money">
								{{item.status == 0? "待付款": item.status == 1? "已付款": item.status == 2? "待发货": item.status == 3? "待收货": item.status == 4? "已委托代售": item.status == 5? "已收货": item.status == 6? "申请退款": item.status == 7? "已退款": item.status == 8? "已取消": ""}}
							</view>
						</view>
					</view>
					<view class="item-order-info">
						<view class="row between">
							<u-image :src="item.icon" width="118" height="118" borderRadius="10"></u-image>
							<view class="fill item-order-right">
								<view class="item-order-title clamp2">{{ item.name }}</view>
								<view class="item-order-num">x 1</view>
							</view>
						</view>
					</view>
					<view class="" style="padding: 24upx 0;">
						<view class="item-order-num">订单编号：{{ item.orderNum }}</view>
						<view class="row between">
							<text class="item-order-num">下单时间：{{ item.createDate }}</text>
							<text class="item-order-num" style="color: #333333;">订单金额：￥{{ item.realPrice }}</text>
						</view>
					</view>
				</view>
			</view>
		</s-pull-scroll>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dataList: [],
			orderNumber: 0
		};
	},
	onLoad() {
		this.refresh();
	},
	methods: {
		pullDown(pullScroll) {
			setTimeout(() => {
				this.loadData(pullScroll);
			}, 200);
		},
		async loadData(pullScroll) {
			const data = {
				uid: uni.getStorageSync("uid"),
				pageNo: pullScroll.page,
				pageSize: 10
			};
			const res = await this.$request("user/invite-order", data, {showLoading: true});
			if (pullScroll.page == 1) {
				this.dataList = [];
			}
			if (res.result == 1 || res.data.list.length == 0) {
				pullScroll.empty();
				return;
			}
			this.orderNumber = res.sum;
			this.dataList = this.dataList.concat(res.data.list);
			pullScroll.page >= Math.ceil(res.data.count / 10) ? pullScroll.finish() : pullScroll.success();
		}
	}
};
</script>

<style scoped>
.topNum {
	width: 750upx;
	height: 165upx;
	background: #99130c;
	padding: 0 20upx;
}
.topTitle {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
	line-height: 80upx;
}
.top-num {
	font-size: 49upx;
	font-family: Adobe Heiti Std;
	font-weight: bold;
	color: #ffffff;
	line-height: 80upx;
}
.top-tips {
	font-size: 26upx;
	font-family: Adobe Heiti Std;
	font-weight: bold;
	color: #ffffff;
}

.item-swiper {
	padding: 20upx;
}
.item {
	padding: 0 20upx;
	margin-bottom: 20upx;
	border-radius: 15upx;
	background: #f6f6f6;
}
.item-name {
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #666666;
	line-height: 40upx;
}
.item-money {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #cc1313;
	line-height: 36upx;
}

.item-order-info {
	padding: 20upx;
	border-radius: 20upx;
	background: #ffffff;
}
.item-order-right {
	position: relative;
	padding-left: 20upx;
	height: 118upx;
}
.item-order-title {
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 36upx;
}
.item-order-num {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
	line-height: 40upx;
}
</style>
